<script setup lang="ts">
import { Document, Download } from "@element-plus/icons-vue";
import { ref, computed } from "vue";
import { tableList } from "../application/edit/secondStep/data";
import { useRouter } from "vue-router";
const router = useRouter();
const columns = [
  {
    label: "活动名称",
    prop: "name",
    align: "center"
  },
  {
    label: "活动内容",
    prop: "connect",
    align: "center",
    minWidth: 120
  },
  {
    label: "负责人",
    prop: "person",
    align: "center"
  },
  {
    label: "开展时间",
    prop: "time[0]",
    align: "center",
    minWidth: 160
  },
  {
    label: "计划时间",
    prop: "time[1]",
    align: "center",
    minWidth: 160
  },
  {
    label: "受益人数",
    prop: "people",
    align: "center"
  },
  {
    label: "完成状态",
    prop: "status",
    align: "center",
    slot: "status"
  },
  {
    label: "产出物(多照片)",
    prop: "image",
    align: "center",
    slot: "image",
    minWidth: 160
  },
  {
    label: "操作",
    slot: "action",
    width: "140"
  }
];
const srcList = [
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"
];
import { downloadByUrl } from "@pureadmin/utils";

import Explains from "@/views/project/application/edit/thirdStep/tabletitle.vue";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";

const multiTags = computed(() => {
  return useMultiTagsStoreHook()?.multiTags;
});
const goBack = () => {
  useMultiTagsStoreHook().handleTags("splice", "/project/carryDetails");
  router.push({
    // multiTags.value[(multiTags as any).value.length - 1].path
    name: "projectCarry"
  });
};
</script>

<template>
  <el-card :body-style="{ padding: '10px' }" class="m-[20px]">
    <template #header>
      <el-page-header @back="goBack">
        <template #content class="w-full">
          <div
            class="text-[20px] font-bold flex justify-center w-full relative items-center relative"
          >
            <div class="text-[12px] absolute left-[0]">2024年，浙江省</div>
            <span class="text-[20px] font-bold block">
              归属项目：2024年度市级公益创投项目
            </span>
          </div>
        </template>
      </el-page-header>
    </template>
    <div>
      <div class="flex items-center justify-between w-full mb-[30px]">
        <span class="flex items-center">
          <span class="text-[18px] font-bold">项目产品清单</span>
          <span class="text-[12px] ml-[20px]">
            社区邻里国际共融服务项目（上城区、滨江区、钱塘区）</span
          >
        </span>
        <el-button
          plain
          @click="
            downloadByUrl(
              'http://101.35.156.219:8099/%E9%A1%B9%E7%9B%AE%E7%BB%93%E9%A1%B9%E6%8A%A5%E5%91%8A.docx',
              '项目结项报告.docx'
            )
          "
        >
          <el-icon><Download /></el-icon>
          导出产出清单
        </el-button>
      </div>
      <template v-for="(item, indexs) in tableList" :key="item.id">
        <Explains
          :title="item.title"
          :contont="item.contont"
          :num="item.num"
          hide
        >
          <div class="ml-[20px] text-[14px] mt-[20px] font-bold">
            项目实施方案
          </div>
          <pure-table
            class="mt-[20px]"
            :data="item.tableData"
            :columns="columns"
            stripe
            border
            :header-cell-style="{
              textAlign: 'center',
              background: '#f5f7fa'
            }"
          >
            <template #time="{ row }">
              {{ row.time.join("至") }}
            </template>
            <template #sort="{ row }">
              {{ row.sort == 1 ? "社区服务类" : "为老服务类" }}
            </template>
            <template #status="{ row, index }">
              <el-tag type="success" v-if="row.status == 1">完成</el-tag>
              <el-tag type="primary" v-else-if="row.status == 2">进行中</el-tag>
              <el-tag type="info" v-else>未开始</el-tag>
            </template>
            <template #image="{ row }">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.imgArr"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :z-index="10000"
                :preview-teleported="true"
                :preview-src-list="srcList"
                :initial-index="4"
                fit="cover"
              />
            </template>

            <template #action="{ row, index }">
              <el-button type="primary" link v-if="row.status == 2"
                >完成</el-button
              >
              <el-button
                type="primary"
                link
                @click="
                  router.push({
                    name: 'projectCarryDetailsEdit'
                  })
                "
                v-if="row.status !== 1"
              >
                {{ row.status == 3 ? "提交进度" : "修改进度" }}
              </el-button>
              <el-button
                type="primary"
                link
                v-if="row.status == 1"
                @click="
                  router.push({
                    name: 'projectCarryDetailsinfo'
                  })
                "
                >查看</el-button
              >
            </template>
          </pure-table>
        </Explains>
      </template>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
:deep(.el-page-header__header) {
  .el-page-header__left {
    flex: auto;
    flex-direction: row;
    .el-page-header__content {
      flex-grow: 1;
    }
  }

  width: 100%;
}
</style>
